/**
 * 弹出选择列表插件
 * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
 * varstion 1.0.1
 * by Houfeng
 * Houfeng@DCloud.io
 */

(function ($, document) {
  // 创建 DOM
  $.dom = function (str) {
    if (typeof (str) !== 'string') {
      if ((str instanceof Array) || (str[0] && str.length)) {
        return [].slice.call(str);
      }
      return [str];
    }
    if (!$.__create_dom_div__) {
      $.__create_dom_div__ = document.createElement('div');
    }
    $.__create_dom_div__.innerHTML = str;
    return [].slice.call($.__create_dom_div__.childNodes);
  };

  const panelBuffer = '<div class="mui-poppicker">\
		<div class="mui-poppicker-header">\
			<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
			<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\
			<div class="mui-poppicker-clear"></div>\
		</div>\
		<div class="mui-poppicker-body">\
		</div>\
	</div>';

  const pickerBuffer = '<div class="mui-picker">\
		<div class="mui-picker-inner">\
			<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
			<ul class="mui-pciker-list">\
			</ul>\
			<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
		</div>\
	</div>';

  // 定义弹出选择器类
  const PopPicker = $.PopPicker = $.Class.extend({
    // 构造函数
    init(options) {
      const self = this;
      self.options = options || {};
      self.options.buttons = self.options.buttons || ['取消', '确定'];
      self.panel = $.dom(panelBuffer)[0];
      document.body.appendChild(self.panel);
      self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
      self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
      self.body = self.panel.querySelector('.mui-poppicker-body');
      self.mask = $.createMask();
      self.cancel.innerText = self.options.buttons[0];
      self.ok.innerText = self.options.buttons[1];
      self.cancel.addEventListener('tap', (event) => {
        self.hide();
      }, false);
      self.ok.addEventListener('tap', (event) => {
        if (self.callback) {
          const rs = self.callback(self.getSelectedItems());
          if (rs !== false) {
            self.hide();
          }
        }
      }, false);
      self.mask[0].addEventListener('tap', () => {
        self.hide();
      }, false);
      self._createPicker();
      // 防止滚动穿透
      self.panel.addEventListener($.EVENT_START, (event) => {
        event.preventDefault();
      }, false);
      self.panel.addEventListener($.EVENT_MOVE, (event) => {
        event.preventDefault();
      }, false);
    },
    _createPicker() {
      const self = this;
      const layer = self.options.layer || 1;
      const width = `${100 / layer}%`;
      self.pickers = [];
      for (let i = 1; i <= layer; i++) {
        const pickerElement = $.dom(pickerBuffer)[0];
        pickerElement.style.width = width;
        self.body.appendChild(pickerElement);
        const picker = $(pickerElement).picker();
        self.pickers.push(picker);
        pickerElement.addEventListener('change', function (event) {
          const nextPickerElement = this.nextSibling;
          if (nextPickerElement && nextPickerElement.picker) {
            const eventData = event.detail || {};
            const preItem = eventData.item || {};
            nextPickerElement.picker.setItems(preItem.children);
          }
        }, false);
      }
    },
    // 填充数据
    setData(data) {
      const self = this;
      data = data || [];
      self.pickers[0].setItems(data);
    },
    // 获取选中的项（数组）
    getSelectedItems() {
      const self = this;
      const items = [];
      for (const i in self.pickers) {
        if (self.pickers.hasOwnProperty(i)) { // 修复for in会访问继承属性造成items报错情况
          const picker = self.pickers[i];
          items.push(picker.getSelectedItem() || {});
        }
      }
      return items;
    },
    // 显示
    show(callback) {
      const self = this;
      self.callback = callback;
      self.mask.show();
      document.body.classList.add($.className('poppicker-active-for-page'));
      self.panel.classList.add($.className('active'));
      // 处理物理返回键
      self.__back = $.back;
      $.back = function () {
        self.hide();
      };
    },
    // 隐藏
    hide() {
      const self = this;
      if (self.disposed) return;
      self.panel.classList.remove($.className('active'));
      self.mask.close();
      document.body.classList.remove($.className('poppicker-active-for-page'));
      // 处理物理返回键
      $.back = self.__back;
    },
    dispose() {
      const self = this;
      self.hide();
      setTimeout(() => {
        self.panel.parentNode.removeChild(self.panel);
        for (const name in self) {
          self[name] = null;
          delete self[name];
        }
        self.disposed = true;
      }, 300);
    },
  });
}(mui, document));
